<template>
  <div class="w-container">
    <Icon
      type="ios-arrow-round-back"
      v-if="!isRegist"
      size="30"
      class="back"
      @click="goBack"
    />
    <Form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      class="regist-form"
    >
      <FormItem prop="name">
        <Input v-model="formValidate.name" placeholder="请输入用户名"></Input>
      </FormItem>

      <FormItem prop="password">
        <Input
          type="password"
          v-model="formValidate.password"
          :placeholder="passwordMessage"
        >
        </Input>
      </FormItem>

      <FormItem prop="mail" class="email">
        <Input
          type="text"
          v-model="formValidate.mail"
          placeholder="请输入邮箱"
          class="input-email"
        >
        </Input>
        <button
          type="button"
          class="get-code"
          @click="sendCode"
          :disabled="isDisabled"
        >
          {{ this.buttonMeassage }}
        </button>
      </FormItem>

      <FormItem prop="code">
        <Input v-model="formValidate.code" placeholder="请输入验证码"> </Input>
      </FormItem>

      <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')"
          >提交</Button
        >
      </FormItem>
    </Form>
  </div>
</template>
<script>
import axios from "@/util/axios";
export default {
  name: "New",
  props: {
    isRegist: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      passwordMessage: "密码",
      formValidate: {
        name: "",
        password: "",
        mail: "",
        code: "",
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        mail: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码不少于6位",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
          {
            type: "string",
            message: "请输入正确的验证码",
            trigger: "blur",
          },
        ],
      },

      buttonMeassage: "发送验证码",
      updateTime: 60,
      isDisabled: false,
    };
  },
  methods: {
    sendCode() {
      //验证邮箱格式
      this.$refs.formValidate.validateField("mail", (valid) => {
        if (valid === "") {
          //验证成功
          //判断用户是注册还是找回密码
          let tag = this.isRegist === true ? 0 : 1;
          //发送请求获取验证码
          axios
            .get("user/sendCode", {
              params: { email: this.formValidate.mail, tag: tag },
            })
            .then((res) => {
              console.log(res);
              if (res.code === "1") {
                //60s后才可重新发送验证码
                this.isDisabled = true;
                let timeInterval = setInterval(() => {
                  this.buttonMeassage = `${this.updateTime}s后可重发`;
                  this.updateTime--;
                  if (this.updateTime === 0) {
                    clearInterval(timeInterval);
                    this.updateTime = 60;
                    this.buttonMeassage = "发送验证码";
                    this.isDisabled = false;
                  }
                }, 1000);
              } else {
                this.$Message.error("该邮箱已注册过");
              }
            });
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        let formData = this.formValidate;
        if (valid) {
          //判断用户是注册还是找回密码

          //发送注册请求
          if (this.isRegist === true) {
            axios
              .post("user/register", {
                data: {
                  code: formData.code,
                  username: formData.name,
                  email: formData.mail,
                  password: formData.password,
                },
              })
              .then((res) => {
                console.log(res);
                if (res.code === "1") {
                  //注册成功后
                  this.$Message.success("Success!");
                  this.$emit("successRegist");
                } else {
                  this.$Message.error("验证码错误");
                }
              });
          } else {
            //发送找回密码的请求
            console.log("asdf");
            axios
              .put("user/findPassword", {
                data: {
                  code: formData.code,
                  username: formData.name,
                  email: formData.mail,
                  password: formData.password,
                },
              })
              .then((res) => {
                console.log(res);
                if(res.code === '1') {
                  this.$Message.success('找回密码成功')
                  //跳转至登陆
                  this.goBack()
                }
                else {
                  this.$Message.error(res.message);
                }
              });
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    goBack() {
      this.$parent.isRegist = true;
      this.$parent.click = "login";
    },
  },
  mounted() {
    this.ruleValidate.password[0].message = this.isRegist
      ? "请输入密码"
      : "请输入新的密码";
    this.passwordMessage = this.isRegist ? "密码" : "新密码";
  },
};
</script>
<style lang="scss" scoped>
.w-container {
  position: relative;
  .regist-form {
    margin-top: 2.5rem;
    .email {
      position: relative;
      .get-code {
        width: 28%;
        height: 3rem;
        line-height: 100%;
        background-color: #0084ff;
        color: #fff;
        padding: 0.7rem;
        position: absolute;
        right: 0;
        top: 0.3rem;
        cursor: pointer;
      }
      .input-email {
        width: 72%;
      }
    }
  }
  .ivu-btn-primary {
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    font-size: 1.8rem;
  }
  .back {
    position: absolute;
    left: -1rem;
    top: 0;
    cursor: pointer;
  }
}
</style>
